<template>
	<div class="Echart_pie">
		<div class="bg"></div>
		<div class="tb" ref="openingChart" :style="{width: width, height: height}"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts';

export default {
	props: {
		height:{
			type:String,
			default:'70px'
		},
		width:{
			type:String,
			default:'100%'
		},
		id:{
			type:String,
			default:'ec'
		},
		fontSize:{
			type:Number,
			default:14,
		},
		tips:{
			type:Boolean,
			default:true,
		},
		xAxis:{
			type:Array,
			default() {
				return [1,2,3,4,5,6,7]
			}
		},
		series: {
			type: Array,
			default() {
				return [
					{name:'2',
					data:[34,25,35,46,57,60,67]}
				];
			},
		},
	},
	data() {
		return {
			myChart:{}
		};
	},
	watch:{
		data(){
			this.init()
		}
	},
	methods:{
		init(){
			this.myChart = echarts.init(this.$refs.openingChart);
			let colorList = [ "#2196F3", "#FAAD13", "#FF3F70","#ffdb5c","#ff9f7f","#fb7293","#e7bcf3",
				"#3CC1F3", "#3E7BF4", "#FAAD13", "#FF3F70","#ffdb5c","#ff9f7f","#fb7293","#e7bcf3"];
			let series=[];
			this.series.forEach((e,index)=>{
				series.push({
						name:e.name,
						type: "line",
						data: e.data,
						lineStyle:{
							type:'solid',
							color:colorList[index],
							width:2
						},
						symbolSize: 0,
						smooth:true,
						areaStyle: {//区域填充渐变颜色
							color: colorList[index],
							opacity:0.05
						}
					},)
			})
			let option = {
				legend: {
					show: false,
				},
				grid: {
					left: 0,
					right: 0,
					top: 10,
					bottom:0,
					containLabel: true
				},
				color:colorList,
				xAxis: [{
					type: 'category',
					boundaryGap:false,
					data: this.xAxis,
					axisLine: {
						show: false,
						lineStyle: {
							color: '#EEF0F4',

						}
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						show: false,
						textStyle: {
							fontSize: this.fontSize,
							color: '8699AD'
						}
					},
				}],
				yAxis: [{
					type: 'value',
					minInterval: 1,
					axisTick: {
						show: false
					},
					axisLine: {
						show: false,
						lineStyle: {
							color: '#EEF0F4'
						}
					},
					axisLabel: {
						show: false,
						formatter:'{value}',
						textStyle: {
							fontSize: this.fontSize,
							color: '#8699AD'
						}
					},
					splitLine: {
						show: false,
						lineStyle: {
							color: '#EEF0F4',
						}
					}
				}],
				tooltip: {
					show: this.tips,
					confine: true,
					trigger: 'axis',
					// formatter: function (params) {
					// 	let relVal = params[0].name+'年';
					// 	let key = [];
					// 	params.forEach(map=>{
					// 		if(!map.value || key.includes(map.seriesName)){
					// 			return
					// 		}
					// 		key.push(map.seriesName)
					// 		relVal += "<br/>" + map.marker + map.seriesName + "&nbsp;&nbsp;&nbsp;&nbsp;";
					// 		relVal += "<span style='float:right;font-weight: bold'>"
					// 		relVal += map.value + "篇";
					// 		relVal += "</span>"
					// 	})
					// 	return relVal;
					// },
				},
				series: series
			};
			this.myChart.setOption(option);
		}
	},
	mounted() {
		this.init()
		let _this = this;
		window.onresize = function() {
			_this.myChart.resize();
		}
	},
};
</script>

<style scoped lang="less">
</style>
